import PropTypes from "prop-types";
import { Grid } from "antd-mobile";
import styles from "./OpsBlock.module.less";

const OpsBlock = (props) => {
  return (
    <div className={styles.block}>
      <div className={styles.title}>
        <i className={`iconfont icon-${props.icon}`}></i>
        {props.title}
      </div>
      <div className={styles["ops-box"]}>
        {props.items ? (
          <Grid columns={props.columns} gap={props.gap}>
            {props.items?.map((item, idx) => (
              <Grid.Item key={idx}>{props.cmptFunc(item)}</Grid.Item>
            ))}
          </Grid>
        ) : (
          props.children
        )}
      </div>
    </div>
  );
};

OpsBlock.propTypes = {
  title: PropTypes.string,
  icon: PropTypes.string,
  items: PropTypes.array,
  columns: PropTypes.number,
  gap: PropTypes.number,
  cmptFunc: PropTypes.func,
};

export default OpsBlock;
